.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}
* {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.box {
    display: -webkit-flex;
    display: flex;
}
html,
body {
    width: 100%;
    height: 100%;
    background: #f8f3f7;
}
.padding(@top, @right, @bottom, @left) {
    .px2rem(padding-top,@top);
    .px2rem(padding-right,@right);
    .px2rem(padding-bottom,@bottom);
    .px2rem(padding-left,@left);
}
.margin(@top, @right, @bottom, @left) {
    .px2rem(margin-top,@top);
    .px2rem(margin-right,@right);
    .px2rem(margin-bottom,@bottom);
    .px2rem(margin-left,@left);
}
.pl(@pl) {
    .px2rem(padding-left,@pl);
}
.pr(@pr) {
    .px2rem(padding-right,@pr);
}
.pt(@pt) {
    .px2rem(padding-top,@pt);
}
.pb(@pb) {
    .px2rem(padding-bottom,@pb);
}
.ml(@ml) {
    .px2rem(margin-left,@ml);
}
.mr(@mr) {
    .px2rem(margin-right,@mr);
}
.mt(@mt) {
    .px2rem(margin-top,@mt);
}
.mb(@mb) {
    .px2rem(margin-bottom,@mb);
}
.w(@width) {
    .px2rem(width,@width);
}
.h(@height) {
    .px2rem(height,@height);
}
.lh(@lh) {
    .px2rem(line-height,@lh)
}
.fz(@fz) {
    .px2rem(font-size,@fz)
}
.header{
    width: 100%;
    .h(101);
    background: #e4366b;
    .box();
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top:0;
    
    span:nth-child(1){
        img{
            .w(61);
            .h(43);
            .pl(24);
        }
        
    }
    span:nth-child(2){
        .fz(50);
        color: #ffffff;
    }
    span:nth-child(3){
        .fz(28);
        color: #ffffff;
        .w(128);
        .h(64);
        background: linear-gradient(#f35582,#d91250);
        border: 1px solid #e1829f;
        border-radius: 10%;
        text-align: center;
        .lh(64);
        .mr(24);
    }
}
.nav{
    .h(104);
    background:#333333;
    .pt(102);
    .box();
  
    align-items: center;
    p{ 
        .pl(25);
        .fz(36);
        color: white;
        
    }
}
.section{
    .h(522);
    
    .box();
    justify-content: center;
    
   
    
    .banner{
     .mt(33);
    .w(516);
    .h(433);
    border: 1px solid #bebebe;
    background: white;
    .box();
    justify-content: center;
    align-items:center;
    img{
        .w(289);
        .h(388);
        
    }
    }
    
}
.aside{
    .h(234);
     
    .box();
    justify-content: center;
    li {
        img {
            
            display: block;
            .w(594);
            .h(100);
        }
        p {
            text-align: center;
            display: block;
            .fz(28);
            color: #3e3e3e;
            .pt(37);
            
            span:nth-child(1){

              text-decoration: line-through;
            }
            span:nth-child(2){
               .pl(170);
                text-decoration: none;
            }
        }
    }
   
}
.footer{
    width: 100%;
    .h(115);
    background: #5d5c62;
    border-top:2px solid #464646;
    position: fixed;
    bottom:0;
    .box();
    justify-content: space-around;
    align-items: center;
    span{
        .fz(44);
        color: #ffffff;
       
    }
}
